<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>借钱贷</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        body,html{
          background: #fff                                                                                                   ;
        }
.login-box{
  width: 100%;
  background: #fff;
}
.logo-box{
  width: 100%;
  margin-top: 105px;
  text-align: center;
}
.logo-box img{
  text-align: center;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
}
.input-box{
  margin-top: 53px;
  padding: 0 48px;
}
.input-pub{
  position: relative;
  border-bottom: #dbdbdb solid 1px;
  padding: 17px 0;
  margin-bottom: 14px;
}
.input-pub input{
  position: relative;;
  width: 100%;
  height: 28px;
  padding-left: 32px;
  font-size: 14px;
  line-height: 28px;
  box-sizing: border-box;
}
.phone{
  background: url() no-repeat left 0.186667rem center;
  background-size: 12px 16px;
}
.code{
  background: url() no-repeat left 0.186667rem center;
  background-size: 12px 14px;
}
.code-btn{
  position: absolute;
  top:14px;
  right: 0;
  z-index: 55;
  display: block;
  width: 86px;
  height: 32px;
  background: #e78720;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  border-radius: 16px;
}
.submit{
  width: 100%;
  height: 42px;
  margin-top: 32px;
  background: -webkit-linear-gradient(left, #f4a123, #f46a21);
  background: -o-linear-gradient(right, #f4a123, #f46a21);
  background: -moz-linear-gradient(right, #f4a123, #f46a21);
  background: linear-gradient(to right, #f4a123 , #f46a21);
  text-align: center;
  line-height: 42px;
  font-size: 16px;
  color: #fff;
  border-radius: 21px;
  box-shadow: 0 5px 12px 5px rgba(244,158,35,0.1)
}
    </style>
</head>

<body>
<div class="login-box" id="login">
  <div class="logo-box">
    <img src="../../image/audit/logo3.png">
  </div>
  <div class="input-box">
    <div class="input-pub phone">
      <input type="number" v-model="phone" id="phone" placeholder="请输入手机号码" @click="inputClick('phone')">
    </div>
    <div class="input-pub code">
      <input type="text" v-model="code" id="code" placeholder="请输入验证码" @click="inputClick('code')">
      <span  class="code-btn" @click="senCode">{{codeText}}</span>
    </div>
    <div class="submit" @click="Login">登录</div>
  </div>
</div>
</body>
<script src="../../script/aui-dialog.js"></script>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.min.js"></script>
<script>
apiready = function() {
    FastClick.attach(document.body);
    api.refreshHeaderLoadDone()
    // 再点一次退出应用
    api.setStatusBarStyle({
        style: 'dark'
    });
    api.addEventListener({
        name: 'keyback'
    }, function(ret, err) {
        api.toast({
            msg: '再点一次退出应用',
            duration: 2000,
            location: 'bottom'
        });
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.closeWidget({
                silent: true
            });
        });
        setTimeout(function() {
            exitApp();
        }, 2000)
    });

};
var dialog = new auiDialog();
var vm = new Vue({
    el: '#login',
    data: {
        phone: '',
        code: '',
        codeText: '发送验证码'
    },
    methods: {
        senCode: function() {
            var that = this
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (that.phone === '') {
                $api.confirm('请输入手机号码')
                return false
            } else if (!myreg.test(that.phone)) {
                $api.confirm('请输入有效的手机号码')
                return false
            }
            that.codeText = 120;
            let timer = setInterval(() => {
                that.codeText--;
                if (that.codeText === 0) {
                    clearInterval(timer);
                    that.codeText = '发送验证码'
                }
            }, 1000);

            $.ajax({
                 type: "get",
                 url: "http://res.yuanguinfo.com/account/app_code",
                 dataType: 'json',
                  async:false,
                  data:{
                    boundleId: 'com.yuanguinfo.xiaotang',
                    phone: that.phone,
                },
                success: function(data){

                }
            });
        },
        inputClick (id) {
          $api.byId(id).focus()
        },
        Login: function() {
            var that = this
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
            if (that.phone === '') {
                $api.confirm('请输入手机号码')
                return false
            } else if (!myreg.test(that.phone)) {
                $api.confirm('请输入有效的手机号码')
                return false
            }
            if (that.code === '') {
                $api.confirm('请输入验证码')
                return false
            }
            $.ajax({
                 type: "get",
                 url: "http://res.yuanguinfo.com/account/app_login",
                 dataType: 'json',
                async:false,
                data:{
                  boundleId: 'com.yuanguinfo.xiaotang',
                  channel: 'oppo',
                  phone: that.phone,
                  code: that.code
                },
                success: function(data){
                  $api.setStorage('phone2', that.phone)
                  api.openWin({
                      name: 'home',
                      url: 'home.html',
                      slidBackEnabled: false
                  });
                }
            });
        }
    },
    mounted: function() {
    }
})
</script>
<style>
</style>

</html>
